import React, { PureComponent }from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { Calendar, Button } from 'antd';
import styles from './MyCalendar.less'

export default class MyCalendar extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      onSelect: [],
      today: moment().format("YYYY-MM-DD"),
      clickType: 'holiday'
    }
  }
  // 日历单元覆盖渲染
 dateFullCellRender = (value) => {
    const date = value.date(); //一个月中的日期 如1 2 3 4 5
    const FormatValue = value.format('YYYY-MM-DD');
   const { today, onSelect } = this.state;
    let outLine = false; // 是否背景高亮
    if (onSelect.length === 1) {
      outLine = moment(FormatValue).isSame(onSelect[0]);
    } else if (onSelect.length === 2) {
      if (moment(FormatValue).isSame(onSelect[0]) || moment(FormatValue).isSame(onSelect[1])) {
        outLine = true;
      } else if (moment(FormatValue).isAfter(onSelect[0]) && moment(FormatValue).isBefore(onSelect[1])) {
       outLine = true;
      }
    }
    switch (true){
      // 小于今天的则禁止
      case moment(FormatValue).isBefore(today):
        return (
          <div className={styles.dateWrapper}>
            <div className={styles.disabled} >
              <span>{date}</span>
            </div>
          </div>
        );
        // 今天被选中
      case moment(FormatValue).isSame(today) && outLine:
        return(
          <div className={styles.dateWrapper}>
            <div className={styles.todayAndSelect} >
              <span>{date}</span>
            </div>
          </div>
        );
       // 今天
      case moment(FormatValue).isSame(today):
        return(
          <div className={styles.dateWrapper}>
            <div className={styles.today} >
              <span>{date}</span>
            </div>
          </div>
        );
        // 被选中的
      case outLine:
        return(
          <div className={styles.dateWrapper}>
            <div className={styles.onSelect} >
              <span>{date}</span>
            </div>
          </div>
        );
        //默认样式
      default:
        return (
          <div className={styles.dateWrapper}>
            <div className={styles.normalDate} >
              <span>{date}</span>
            </div>
          </div>
        );
    }
  };
  // 报餐点击日历单元
  bookFood = (value) => {
    const FormatValue = value.format('YYYY-MM-DD');
    const { onSelect, clickType } = this.state;
    const { onChange } = this.props;
    if(onSelect.length === 0) {
      this.setState({onSelect: [FormatValue]}, () => {onChange(this.state.onSelect, clickType);})
    } else if (onSelect.length === 1) {
      this.setState({onSelect: [FormatValue]}, () => {onChange(this.state.onSelect, clickType);})
    } else if (onSelect.length === 2) {
      this.setState({onSelect: [FormatValue]}, () => {onChange(this.state.onSelect, clickType);})
    }
  };
  // 请假点击日历单元
  holiday = (value) => {
    const FormatValue = value.format('YYYY-MM-DD');
    const { onSelect, clickType} = this.state;
    const { onChange } = this.props;
    if(onSelect.length === 0) {
      onSelect.push(FormatValue);
      this.setState({onSelect}, () => {onChange(this.state.onSelect, clickType);})
    } else if (onSelect.length === 1) {
      if(moment(FormatValue).isBefore(onSelect[0])) {
        onSelect.unshift(FormatValue);
        this.setState({onSelect}, () => {onChange(this.state.onSelect, clickType);})
      } else if (moment(FormatValue).isAfter(onSelect[0])){
        onSelect.push(FormatValue);
        this.setState({onSelect}, () => {onChange(this.state.onSelect, clickType);})
      }
    } else if (onSelect.length === 2) {
      this.setState({onSelect: [FormatValue]}, () => {onChange(this.state.onSelect, clickType);})
    }
  };
  render() {
    const { clickType } = this.props;
    return (
      <div className={styles.wrapper}>
        <Calendar
          disabledDate={current => current < moment().startOf('day')}
          dateFullCellRender={this.dateFullCellRender}
          onSelect={clickType === 'bookfood' ? this.bookFood : this.holiday}
        />
      </div>
    );
  }
}
MyCalendar.propTypes = {
  onChange: PropTypes.func
};

MyCalendar.defaultProps = {
}
